<template>
  <div class="visitors">
    <van-cell-group class="visitors-items" :border="false">
      <van-field label="预约客户" v-model="companyname" placeholder="请填写公司名称" input-align="right" :rules="[{ required: true }]" required />
      <van-field label="联系人" v-model="visitorname" placeholder="请填写联系人姓名" input-align="right" :rules="[{ required: true }]" required />
      <van-field label="联系方式" v-model="telphone" placeholder="请填写联系方式" input-align="right" :rules="[{ required: true }]" required />
      <van-field label="来访人数" type="number" v-model="number" placeholder="请填写来访人数" input-align="right" :rules="[{ required: true }]" required />
      <van-field label="预约日期" v-model="dates" placeholder="请选择参观的日期" input-align="right" :rules="[{ required: true }]" required readonly is-link @click="showPopup(1)" />
      <van-field label="预约时间段" v-model="times" placeholder="请选择参观的时间段" input-align="right" :rules="[{ required: true }]" required readonly is-link @click="showPopup(2)" />
      <!-- 客户行业 -->
      <van-checkbox-group v-model="industry" class="checkboxs" checked-color="#1bb89c">
        <van-cell title="客户行业" input-align="right" required>
          <template #default>
            <van-checkbox v-for="(item, value, index) in checkbox_items1" :key="index" shape="square" :name="value" class="check-item">
              <span class="name">{{item}}</span>
              <van-field v-if="item=='其它' || item=='其他'" v-model="other1" placeholder="请填写行业名称" class="others" @click.stop.native="()=>{}" />
            </van-checkbox>
          </template>
        </van-cell>
      </van-checkbox-group>
      <!-- 从哪了解冻眠 -->
      <van-checkbox-group v-model="access" class="checkboxs" checked-color="#1bb89c">
        <van-cell title="从哪了解冻眠" input-align="right" required>
          <template #default>
            <van-checkbox v-for="(item, value, index) in checkbox_items2" :key="index" shape="square" :name="value" class="check-item">
              <span class="name">{{item}}</span>
              <van-field v-if="item=='其它' || item=='其他'" v-model="other2" placeholder="请填写从哪了解冻眠" class="others" @click.stop.native="()=>{}" />
            </van-checkbox>
          </template>
        </van-cell>
      </van-checkbox-group>
      <!-- 参观目的 -->
      <van-checkbox-group v-model="purpose" class="checkboxs" checked-color="#1bb89c">
        <van-cell title="参观目的" input-align="right" required>
          <template #default>
            <van-checkbox v-for="(item, value, index) in checkbox_items3" :key="index" shape="square" :name="value" class="check-item">
              <span class="name">{{item}}</span>
              <van-field v-if="item=='其它' || item=='其他'" v-model="other3" placeholder="请填写参观目的" class="others" @click.stop.native="()=>{}" />
            </van-checkbox>
          </template>
        </van-cell>
      </van-checkbox-group>
    </van-cell-group>
    <div class="visitors-set" v-show="isOriginHei">
      <div class="set-center">
        <van-button round type="info" :disabled='disabled' color="#1bb89c" @click="onSubmit()">提 交</van-button>
      </div>
    </div>

    <van-popup v-model="showPicker" position="bottom" round>
      <van-datetime-picker v-if="dates_show" type="date" :min-date="minDate" :formatter="formatter" @confirm="onConfirm1" @cancel="showPicker = false" />
      <van-picker v-if="times_show" title="请选择" show-toolbar :columns="columns" @confirm="onConfirm2" @cancel="showPicker = false" />
    </van-popup>

  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
export default {
  name: "Visitors",
  data () {
    return {
      disabled: false,
      companyname: '',
      visitorname: '',
      telphone: '',
      number: '',
      dates: '',
      datess: '',
      times: '',
      timess: '',
      industry: [],
      access: [],
      purpose: [],
      checkbox_items1: {},
      checkbox_items2: {},
      checkbox_items3: {},
      other1: '',
      other2: '',
      other3: '',
      columns: ['10:00-12:00', '14:00-16:00',],
      minDate: new Date(),
      currentDate: new Date() + 1,
      showPicker: false,
      dates_show: false,
      times_show: false,
      isOriginHei: true,
      screenHeight: document.documentElement.clientHeight,        //此处也可能是其他获取方法
      originHeight: document.documentElement.clientHeight,
    };
  },
  created () {
    this.getMakeTime()
  },
  mounted () {
    let self = this;
    window.onresize = function () {
      return (function () {
        self.screenHeight = document.documentElement.clientHeight;
      })()
    }
  },
  watch: {
    screenHeight (val) {
      if (this.originHeight > val + 100) {        //加100为了兼容华为的返回键
        this.isOriginHei = false;
      } else {
        this.isOriginHei = true;
      }
    }
  },
  methods: {
    showPopup (index) {
      this.showPicker = true
      if (index == 1) {
        this.dates_show = true
        this.times_show = false
      } else if (index == 2) {
        this.dates_show = false
        this.times_show = true
      }
    },
    // 时间选择器过滤
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      } else if (type === 'day') {
        return `${val}日`;
      }
      return val;
    },
    // 选择器1
    onConfirm1 (time) {
      this.datess = time
      this.dates = this.$moment(time).format('YYYY/MM/DD')
      this.showPicker = false
    },
    // 选择器2
    onConfirm2 (value, index) {
      this.times = value
      this.timess = index + 1
      this.showPicker = false
    },
    getMakeTime () {
      this.$notoken("/scan/registration")
        .then((res) => {
          if (res.data.code == 1) {
            let obj1 = res.data.data.data
            this.checkbox_items1 = res.data.data.hanyedata
            this.checkbox_items2 = res.data.data.liaojiedata
            this.checkbox_items3 = res.data.data.mudidata
            this.columns = Object.values(obj1)
          } else {
            Toast.fail(res.data.msg);
          }
        })
    },
    // 提交
    onSubmit () {
      Toast.loading('正在提交')
      setTimeout(() => {
        function beforeClose (action, done) {
          if (action === 'confirm') {
            setTimeout(done, 1000);
          } else {
            done();
          }
        }
        this.$notoken("/scan/registration", {
          handle: "save", //提交申请时必填
          companyname: this.companyname, //企业名称
          visitorname: this.visitorname, //联系人姓名
          telphone: this.telphone, //联系人电话
          number: this.number, //来访人数
          checkbox_item1: this.industry, // 客户行业
          checkbox_item2: this.access, // 从哪了解冻眠
          checkbox_item3: this.purpose, // 参观目的
          other1: this.other1, // 其他1
          other2: this.other2, // 其他2
          other3: this.other3, // 其他3
          visitdate: this.datess.getTime() / 1000, // 来访日期时间戳
          visittimeid: this.timess,  // 来访时间段
        })
          .then((res) => {
            if (res.data.code == 1) {
              Dialog.alert({
                title: '预约成功',
                message: '欢迎来到冻眠基地，已收到您的预约，请等待工作人员联系！',
                confirmButtonColor: '#1bb89c',
                beforeClose,
              }).then(() => {
                location.reload()
              })
            } else {
              Toast.fail(res.data.msg);
            }
          })
      }, 2000);
    },
  },
};
</script>
<style lang="less" scoped>
.visitors {
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
  /deep/.van-cell__title {
    flex: 1;
  }
  /deep/.van-cell__value {
    flex: 2;
  }
  &-items {
    width: 100%;
    font-family: '思源黑体-S';
    /deep/ .van-field__label {
      width: 2rem;
      color: black;
    }
    .visitors-introduce {
      /deep/ .van-field__label {
        width: 20%;
      }
      /deep/ .van-field__body {
        background-color: #f6f6f6;
        border-radius: 10px;
        padding: 20px;
      }
    }
    .checkboxs {
      /deep/.van-cell__value {
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        .van-checkbox {
          margin-bottom: 20px;
        }
      }
      .check-item:last-child {
        .name {
          margin-top: 5px;
        }
        /deep/.van-checkbox__label {
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .others {
      display: inline;
      padding: 0;
      width: 80%;
      border-bottom: 1px solid #ccc;
    }
  }
  &-set {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    bottom: 40px;
    .set-center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0 auto;
      .set-spacing {
        height: 30px;
      }
      /deep/ .van-button {
        width: 80%;
        height: 80px;
        font-family: '思源黑体-L';
        font-size: 30px;
      }
    }
  }
}
</style>